<!--  -->
<template>
  <div class="page">
    <van-nav-bar class="nav_bar_class" title="登记企业" left-arrow @click-left="goBack" />
    <div class="content">
      <div class="nav_title">如果贵酒店尚未登记，请填写一下基本信息，以便我们更好的提供服务，如已登记请加入酒店</div>
      <div class="hotel_form">
        <vantForm ref="vanForm" :rules="rules" inputVail="true">
          <template slot="items">
            <van-field
              class="no_bg"
              label-width="3.5rem"
              label="统一社会信用代码："
              placeholder="认证完成后系统自动分配"
              readonly
            />
            <van-field
              class="no_bg"
              error-message="请输入正确的企业名称"
              rule="name"
              label="企业名称："
              placeholder="请输入企业名称"
              v-model="reqParam.name"
            />
            <van-field
              class="no_bg"
              error-message="请输入正确的统一社会信用代码"
              rule="code"
              label-width="3.5rem"
              label="统一社会信用代码："
              placeholder="请输入统一社会信用代码"
              v-model="reqParam.code"
            />
            <van-field class="no_bg" label="地址信息：" placeholder="请选择省市区" />
            <van-field
              class="no_bg"
              label="详细地址："
              rule="address"
              placeholder="请输入详细地址"
              v-model="reqParam.address"
              error-message="请输入详细地址"
            />
            <van-field
              class="no_bg"
              label="办公电话："
              rule="phone"
              placeholder="如：0595-xxxxxx"
              v-model="reqParam.phone"
              error-message="请输入办公电话"
            />
            <van-field
              class="no_bg"
              label="联系人："
              placeholder="请输入联系人"
              v-model="reqParam.contact_name"
              rule="contact_name"
              error-message="请输入正确的联系人"
            />
            <van-field
              class="no_bg"
              label="手机："
              placeholder="请输入联系人手机"
              v-model="reqParam.contact_mobile"
              rule="contact_mobile"
              error-message="请输入正确的联系人手机"
            />
            <van-field
              class="no_bg"
              label="邮箱："
              placeholder="请输入联系人邮箱"
              v-model="reqParam.contact_email"
              rule="contact_email"
              error-message="请输入正确的联系人邮箱"
            />
            <div class="no_bg cell">
              <div class="cell_box">
                <div class="label">企业类型：</div>
                <div class="content">
                  <van-radio-group class="radio_group" v-model="reqParam.type">
                    <van-radio name="0">总店</van-radio>
                    <van-radio name="1" style="margin-left:0.5rem;">分店</van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
            <van-field
              label-width="3rem"
              class="no_bg"
              label="所属总店编码："
              placeholder="无需输入"
              v-model="reqParam.parent_hotel_serial_num"
              rule="parent_hotel_serial_num"
              error-message="请输入正确的所属总店编码"
            />
            <div class="no_bg cell">
              <div class="cell_box">
                <div class="label—long">绿色企业类型：</div>
                <div class="content">
                  <van-radio-group class="radio_group" v-model="reqParam.company_type">
                    <van-radio name="0">绿色饭店</van-radio>
                    <van-radio name="1" style="margin-left:0.1rem;">绿色餐饮企业</van-radio>
                    <van-radio :name="2" style="margin-left:0.1rem;">非绿色企业</van-radio>
                  </van-radio-group>
                </div>
              </div>
            </div>
            <van-field
              class="no_bg"
              label-width="3rem"
              label="绿色企业等级："
              placeholder="点击选择绿色企业等级"
              v-model="reqParam.level"
              rule="level"
              error-message="请输入正确的绿色企业等级"
            />
            <van-field
              class="no_bg"
              label="证书编号："
              placeholder="请输入证书编号"
              v-model="reqParam.certificate_no"
              rule="certificate_no"
              error-message="请输入正确的证书编号"
            />
            <van-field
              class="no_bg"
              label="生效日期"
              placeholder="请选择生效日期"
              v-model="reqParam.effective_time_start"
              rule="effective_time_start"
              error-message="请选择生效日期"
            />
            <van-field
              class="no_bg"
              label="有效期至"
              placeholder="请选择有效期至"
              v-model="reqParam.effective_time_end"
              rule="effective_time_end"
              error-message="请选择额有效期至"
            />
          </template>
        </vantForm>
      </div>
      <div class="btn_box">
        <van-button class="submit-btn next_btn" type="primary" @click="submitForm" block>下一步</van-button>
        <van-button class="submit-btn back_btn" type="primary" @click="submitForm" block>加入酒店</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import VantForm from "@/components/vant-ui-extend-form.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      text: "",
      reqParam: {
        name: "",
        code: "",
        address_p: "",
        address_c: "",
        address_a: "",
        address: "",
        phone: "",
        contact_name: "",
        contact_mobile: "",
        contact_email: "",
        type: "0",
        parent_hotel_serial_num: "",
        company_type: "0",
        level: "",
        certificate_no: "",
        effective_time_start: "",
        effective_time_end: ""
      },
      rules: {
        name: { required: true },
        code: { required: true },
        address: { required: true },
        phone: { required: true },
        contact_name: { required: true },
        contact_mobile: { required: true },
        contact_email: { required: true },
        type: { required: true },
        parent_hotel_serial_num: { required: true },
        company_type: { required: true },
        level: { required: true },
        certificate_no: { required: true },
        effective_time_start: { required: true },
        effective_time_end: { required: true }
        // phone: { regExp: /^(1\d{10})$/, required: true },
        // pwd: { regExp: /^(\w){6,20}$/, required: true },
        // confirmPwd: {
        //   required: true,
        //   handleVailFun: val => {
        //     return val === this.reqParam.pwd;
        //   }
        // }
      }
    };
  },
  components: {
    VantForm
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    submitForm() {
      this.$refs["vanForm"].allVail()
        ? Toast.success("校验通过")
        : Toast.fail("提交失败");
    }
  }
};
</script>

<style scoped>
.nav_bar_class {
  background: #b0c870;
}
.page >>> [class*="van-hairline"]::after {
  border: none;
}
.page >>> .van-nav-bar__title {
  color: #45862c;
}
.page >>> .van-nav-bar .van-icon {
  color: #45862c;
}
.content {
  width: 100%;
  position: relative;
}
.nav_title {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  box-sizing: border-box;
  padding: 10px;
  color: #fff;
  background: #5d803e;
}
.hotel_form {
  padding-top: 55px;
  background: #ccd79d;
}
.no_bg {
  background: none;
  color: #5d803e;
}
.hotel_form >>> .van-cell__value--alone {
  color: #5d803e;
}
.cell {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 0px 0px 0px 15px;
}
.cell .label {
  width: 100px;
  font-size: 14px;
}
.cell .label—long {
  width: 150px;
  font-size: 14px;
}
.cell_box {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  border-bottom: 0.6px solid #ebedf0;
  padding: 10px 0px;
}
.radio_group {
  display: flex;
  font-size: 10px;
}
.btn_box {
  width: 100%;
  box-sizing: border-box;
  padding: 30px 20px;
  background: #b4c775;
}
.next_btn {
  background: #45862c;
  color: #fff;
  border-color: #45862c;
}
.back_btn {
  background: none;
  color: #45862c;
  border-color: #45862c;
  margin-top: 20px;
}
</style>
